<template>
  <Teleport to="body">
    <section
      class="h-screen w-screen overflow-hidden fixed z-[99999] inset-0 bg-[rgba(109,116,126,0.4)] flex justify-center pt-[100px]"
      @click.stop.prevent
    >
      <div
        class="grid grid-rows-[140px_1fr_40px] rounded-[4px] overflow-hidden bg-[#F9FCFF] dialog backdrop-blur-[4px] pb-[20px] w-[400px] h-[200px] rounded-[4px]"
      >
        <section class="px-[20px] py-[20px] mt-[20px]">
          <div class="flex items-center">
            <img
              src="../../assets/images/tip.png"
              alt=""
              class="w-[16px] h-[14px] mr-[12px]"
            />
            <div class="font-bold text-[18px]">{{ title }}</div>
          </div>
          <div class="mt-[8px] text -[16px] ml-[28px]">{{ content }}</div>
        </section>
        <!-- <component :is="content"></component> -->
        <section class="flex justify-end gap-x-[16px] pr-[24px]">
          <Button type="cancel" @click="cancel">{{ cancelText }}</Button>
          <Button type="detele" @click="submit">{{ submitText }}</Button>
        </section>
      </div>
    </section>
  </Teleport>
</template>

<script setup>
const {
  title,
  cancel,
  isShowBtn,
  submitText,
  cancelText,
  submit,
  loading,
  contentClass,
} = defineProps({
  title: {
    type: String,
    default: "",
  },
  cancel: {
    type: Function,
    default: () => {},
  },
  isShowBtn: {
    type: Boolean,
    default: true,
  },
  submit: {
    type: Function,
    default: () => {},
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  submitText: {
    type: String,
    default: "删除",
  },
  loading: {
    type: [Boolean, Number, Object],
    default: false,
  },
  content: {
    type: [String, Object],
    default: "",
  },

  contentClass: {
    type: String,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.head {
  background: var(--alert-header-bg-color);
}

:deep(.el-select-dropdown__item) {
  font-size: 16px;
  font-family: MicrosoftYaHei;
}

.dialog {
  background-size: 100% 100%;
  background-position: bottom right;
  background-repeat: no-repeat;
}
</style>
<style lang='scss'>
</style>